<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="">
<div class="row">
<div class="post">
<span class="folded-corner"></span>
this is an animated foldover demo
</div>
<div class="post photo">
<span class="folded-corner"></span>
<img src="https://lh4.googleusercontent.com/-3A2P0H0Ki8c/U4LnUDvkk0I/AAAAAAAAAGg/BhqlvctmcDE/w575-h577-no/166747_544326288935246_142879547_n.jpg" style="width:100%">
</div>
</div>
</div>
body {
width: 500px;
margin: 0px auto;
padding: 40px 0 0;
background-color: #fff;
font-family: Verdana, sans-serif;
font-size: 11px;
}
a {color: #000;}
.post {
margin: 0px 0px 40px;
padding: 15px;
position: relative;
background-color: #fff;
-webkit-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
-moz-box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
box-shadow: 0 1px 3px rgba(100, 100, 100, 0.4), 0 0 40px rgba(100, 100, 100, 0.1) inset;
}
.photo {padding: 0px!important;}
.folded-corner {
width: 0px;
height: 0px;
position: absolute;
top: -1px;
right: -1px;
border-width: 0;
border-style: solid;
background: hsla(260,5%,60%,0.2);
-webkit-box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1);
box-shadow: 2px -2px 0px #fff, 0 1px 1px rgba(0,0,0,0.1), -1px 1px 1px rgba(0,0,0,0.1);
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius: 0 0 0 15px;
border-radius: 0 0 0 15px;
border-color: #fff #fff transparent transparent;
-webkit-transition: border-width 0.2s ease-out;
-moz-transition: border-width 0.2s ease-out;
-ms-transition: border-width 0.2s ease-out;
-o-transition: border-width 0.2s ease-out;
transition: border-width 0.2s ease-out;
}
.post:hover .folded-corner {border-width: 0 40px 40px 0;}
.photo .folded-corner {background: hsla(260,5%,75%,0.5);}
